<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../reactBag/react.development.js"></script>
    <script src="../reactBag/react-dom.development.js"></script>
    <script src="../reactBag/babel.min.js"></script>
    <script src="../reactBag/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>

    <script type="text/babel">

        class App extends React.Component{
            state = {
                gather : [
                    { id : "01", name : "黄渤", age : 39 , hobby : "抽烟"},
                    { id : "02", name : "王宝强", age : 36, hobby : "喝酒"},
                    { id : "03", name : "老王", age : 50 , hobby : "打麻将"}
                ]
            }

            render() {
                const {gather} = this.state
                return <div>
                            <h1>演员信息</h1>
                            {
                                gather.map(item => {
                                    const {id,name,age,hobby} = item
                                    return <Son key = {id} {...item}/>
                                })
                            }
                    
                    
                       </div>
            }
        }
        class Son extends React.Component{
            render() {
                const {id,name,age,hobby} = this.props;
               return <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age}</li>
                        <li>爱好：{hobby}</li>
                      </ul>
            }
        } 

        ReactDOM.createRoot(document.getElementById('app')).render(<App/>)

    </script>
</body>
</html>